<template>
    <div class="app-container">
      <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
      <!--表单-->
    <div class="app-container" style="width: 100%">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="学号"  prop="studentId"/>
        <el-table-column align="center" label="姓名"  prop="studentName"/>
        <el-table-column align="center" label="竞赛"  prop="competitionName"/>
        <el-table-column align="center" label="级别"  prop="competitionType"/>
        <el-table-column align="center" label="奖项"  prop="awards"/>
        <el-table-column align="center" label="团队"  prop="entrants"/>
      </el-table>
      <el-pagination
        background layout="prev, pager, next"
        v-show="total > 0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="handleSuccess"
      />
    </div>
    </div>
  </template>
  
  <script>
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import {getCompetition} from '@/api/table';
  
  export default {
    name: 'UploadExcelCompetition',
    components: { UploadExcelComponent },
    data() {
      return {
      total:0,
      list: [],//列表
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      listLoading: false
      }
    },
    methods: {
      beforeUpload(file) {
        const isLt1M = file.size / 1024 / 1024 < 20
        if (isLt1M) {
          console.log('调用了方法')
          return true
        }
  
        this.$message({
          message: '文件太大',
          type: 'warning'
        })
        return false
      },
      handleSuccess({ results, header }) {
        getCompetition(this.queryParams).then(res=>{
          this.list=res.data.rows
          this.total=res.data.total
          this.listLoading=false
        })
      }
    }
  }
  </script>
  